<template>
  <div class="page bgc-f4f4f4">
    <x-header title="运单详情"></x-header>
    <div class="mt46 main bgc-fff">
      <div class="f16 pad-t30 bgc-f4f4f4 pad-l-r15 ta-c c-666" v-if="!shipOrderItemData">
        暂无运输任务信息
      </div>
      <div v-else class="" v-for="(item,index) in shipOrderItemData.shipTaskBos" :key="index">
        <!-- title -->
        <div class="pad15 f16 ta-l bor-bottom flex a-between l-center" @click="closeItem(index)">
          <span>
            运输任务：{{item.taskCode}}
          </span>
          <!--<img  class="icon-btn-right" :src="staticImgData.imgurlb" alt=""-->
                <!--:class="[{'rotation':taskIndex == index &&reverseShow}]">-->
          <i class="iconfont blue icon-arrow-right1 f14" :class="[{'rotation':taskIndex == index &&reverseShow}]"></i>
        </div>
        <div v-show="taskIndex == index && reverseShow">
          <!-- fill-box -->
          <div class="fill-box bor-bottom" >
            <div class="fill-item fill-b">
              <i class="mr25 bgc-1e90ff "></i>
              <div class="ta-l bor-bottom w325">
                <!-- <p class="c-999 f14 pad-t-b15">
                  <span>{{waybillData.dirverName}}暂无</span>
                  <span>{{waybillData.dirverPhone}}暂无</span>
                </p> -->
                <p class="c-000 f16 pad15">{{item.startAddress}}</p>
              </div>
              <div style="clear:both;"></div>
            </div>
            <div class="fill-item">
              <i class="mr25 bgc-ff9b7b "></i>
              <div class=" ta-l w325" >
                <!-- <p class="c-999 f14 pad-t-b15">
                  <span>{{waybillData.dirverName}}</span>
                  <span>{{waybillData.dirverPhone}}</span>
                </p> -->
                <p class="c-000 f16 pad15">{{item.endAddress}}</p>
              </div>
              <div style="clear:both;"></div>
            </div>
          </div>
          <!-- 间隔 -->
          <!-- <div class="mo-spacing"></div> -->
          <!-- carList -->
          <div class="main-carlist">
            <!--<div class="pad15 bor-bottom f16 c-000 ta-l">-->
              <!--车辆清单-->
            <!--</div>-->
            <!-- <img class="mr15" :src="staticImgData.imgurla" alt=""> -->
            <div class="pad15 f16 ta-l bor-bottom flex a-between l-center c-000" @click="reverseShow2 = !reverseShow2">
              <div class="f16 flex l-center a-start">
                <span>总台数：</span>
                <span class="red" v-if="item.shipOrderItemBos && item.shipOrderItemBos.length > 0">{{item.shipOrderItemBos.length}}</span>
                <span class="red" v-else>0</span>
              </div>
              <!--<img class="icon-btn-right blue" :src="staticImgData.imgurlb" alt=""-->
              <i class="iconfont blue icon-arrow-right1 f14" :class="[{'rotation':reverseShow2}]"></i>
            </div>
            <div class="pad10 bor-bottom bgc-fff" v-show="reverseShow2 && item.shipOrderItemBos && item.shipOrderItemBos.length > 0">
              <div class="br-6 bgc-f4f4f4" style="overflow: hidden;">
                <!-- <img class="mr15" :src="staticImgData.imgurla" alt=""> -->
                <div  class="list-item bor-bottom" v-for='(item2,index2) in item.shipOrderItemBos' :key='index2'>
                  <div class="f14 c-000 flex l-center a-start">
                    <span class="c-999"> 品牌：</span><span>{{item2.material}}</span>
                  </div>
                  <div class="f14 c-000 flex l-center a-start">
                    <span class="c-999"> 车架号：</span><span>{{item2.issueItemId}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="pad15 flex a-between l-center bor-bottom ta-l">
              <div class="f16 c-000">
                要求运抵时间
              </div>
              <div v-if="item.gmtExpectFinish" class="f16 c-999">
                {{item.gmtExpectFinish|parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
              </div>
              <div v-else class="f16 c-999">
                暂无
              </div>
            </div>
            <!-- <div class="pad15 flex a-between l-center bor-bottom ta-l">
              <div class="f16 c-000">
                运费
              </div>
              <div class="f16 c-999">
                ￥ {{shipOrderItemData.waybillCost}}
              </div>
            </div> -->
            <!-- <div class="pad15 flex a-between l-center ta-l">
              <div class="f16 c-000">
                备注
              </div>
              <div class="f16 c-999">
                {{shipOrderItemData.waybillDsc}}
              </div>
            </div>   -->
          </div>
        </div>
        <div class="mo-spacing"></div>
      </div>
    </div>
    <div style="height:.5rem;"></div>
    <v-tabbar></v-tabbar>
    <v-loading v-show="loadingShow"></v-loading>
    <confirm
      v-model="confirmShow"
      :show-cancel-button="false"
      :title="confirmData.title"
      @on-confirm="onConfirm">
      <p style="text-align:center;">{{confirmData.context}}</p>
    </confirm>
  </div>
</template>

<script type="text/ecmascript-6">
  import LisaTabbar from '@/components/common/tabbar/tabbar'
  import { Confirm, XHeader } from 'vux'
  import * as TenantApi from '@/api/tenant'
  import * as SessionS from '@/utils/store/storage'
  import Loading from '@/components/common/loading/loading'
  export default {
    name: 'shipOrder-adminDetail',
    data() {
      return {
        navName: '', // footer_nav 传选中nav的name
        staticImgData: {
          imgurla: require('@/assets/image/common/user.png'),
          imgurlb: require('@/assets/image/common/btn_right.png')
        },
        waybillItem: {},
        waybillId: '',
        waybillData: {
          orderId: 12154545,
          dirverName: '王大成',
          dirverPhone: '13355454545',
          waybillRequireTime: '2018-05-06',
          waybillCost: '100',
          waybillDsc: '注意实效，路上注意安全',
          wantStartPlace: '南昌xxxxxxx',
          wantEndPlace: '南昌xxxxxxx',
          carListData: [
            {
              carImgUrl: '',
              carName: '江铃N800厢货',
              carOil: 'V柴油',
              carNum: 2
            },
            {
              carImgUrl: '',
              carName: '江铃N800厢货',
              carOil: 'V柴油',
              carNum: 2
            }
          ]
        },
        shipOrderItemData: {},
        driverParam: { // 用于定位相关信息提交
          wantStartPlace: '',
          wantEndPlace: '',
          alreadyLoadNum: '',
          canLoadNum: '',
          loadTime: '',
          nowLocation: {
            lat: '', // 纬度
            lon: '', // 经度
            province: '',
            city: '',
            district: '', // 区 县
            Address: '' // 详细地址
          },
          nowPlace: '' // 省-市-区
        },
        confirmShow: false, // vux-confirm提示弹窗
        confirmData: {
          title: '提示',
          context: '正在建设中,后续开放...'
        },
        loadingShow: false,
        checkParamShow: false,
        taskIndex: 0, // 控制列表展开
        reverseShow: true, // 控制列表展开
        taskIndex2: 0, // 控制列表展开
        reverseShow2: true // 控制列表展开
      }
    },
    components: {
      Confirm, XHeader,
      'v-loading': Loading,
      'v-tabbar': LisaTabbar
    },
    created() {
      const that = this
      that.waybillItem = that.$route.params.waybillItem
      if (!that.waybillItem) {
        that.waybillItem = SessionS.getSession('waybillItem')
      }
    },
    mounted() {
      const that = this
      that.waybillDetailInit() // 获取运单任务详情
    },
    methods: {
      onConfirm: function() {
        console.log('confirm()-确定')
      },
      waybillDetailInit: function() {
        const that = this
        that.loadingShow = true
        // that.waybillItem.id 运单id
        TenantApi.companyShipListTask(that.waybillItem.id).then(res => {
          if (res.code === 0) {
            that.shipOrderItemData = res.data
          }
          that.loadingShow = false
        }).catch(res => {
          that.loadingShow = false
          console.warn('error', res)
        })
      },
      closeItem2: function(val) {
        if (val !== this.taskIndex2) {
          // 如果二次点击 不是同一个，最后不取反
          if (this.reverseShow2 === false) {
            this.taskIndex2 = val
            this.reverseShow2 = true
          } else if (this.reverseShow2) {
            if (this.taskIndex2 === (2 - 1)) {
              this.taskIndex2 = 0
            } else {
              this.taskIndex2 = val
            }
          }
        } else {
          // 点击是同一个，最后要取反
          if (this.reverseShow2 === false) {
            this.taskIndex2 = val
            this.reverseShow2 = true
          } else if (this.reverseShow2) {
            if (this.taskIndex2 === (2 - 1)) {
              this.taskIndex2 = 0
              this.reverseShow2 = false
            } else {
              this.taskIndex2 = val + 1
            }
          }
        }
      },
      closeItem: function(val) {
        if (val !== this.taskIndex) {
          // 如果二次点击 不是同一个，最后不取反
          if (this.reverseShow === false) {
            this.taskIndex = val
            this.reverseShow = true
          } else if (this.reverseShow) {
            if (this.taskIndex === (2 - 1)) {
              this.taskIndex = 0
            } else {
              this.taskIndex = val
            }
          }
        } else {
          // 点击是同一个，最后要取反
          if (this.reverseShow === false) {
            this.taskIndex = val
            this.reverseShow = true
          } else if (this.reverseShow) {
            if (this.taskIndex === (2 - 1)) {
              this.taskIndex = 0
              this.reverseShow = false
            } else {
              this.taskIndex = val + 1
            }
          }
        }
      }
    }
  }
</script>

<style scoped>
  @import '../../styles/util.css';
  /* common */
  .page{
    overflow-y: auto;
  }
  div>span{
    display: block;
  }
  .w100{
    width: 1rem;
  }
  .w325{
    width: 3.25rem;
    float: left;
  }
  .fill-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .fill-b:after {
    content: " ";
    position: absolute;
    left: 0.04rem;
    top: 0.35rem;
    height: .3rem;
    width: .01rem;
    background-color: #ededed;
    z-index: 0;
  }
  .list-item{
    padding: .1rem .15rem;
    display: flex;
    /* justify-content: flex-start; */
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .list-item>img{
    width: .66rem;
    height: .66rem;
  }
  .list-item-other{
    color:#ed4848;
    font-size: .14rem;
    position: absolute;
    right: .2rem;
    bottom:.2rem;
  }
  .title-left{
    width:2.6rem;
    text-align: left;
    overflow: hidden;
  }
  /*  */
  .icon-arrow-right1.rotation{
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); 	/* IE 9 */
    -moz-transform:rotate(90deg); 	/* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg); 	/* Opera */
  }
  .min-btn{
    border-radius: .04rem;
  }
</style>

